<template>
  <div class="list_container flex both-100">
    <breadcrumb :title="pageTitle" />
    <div class="content_container">
      <!-- 搜索模块 -->
      <el-form ref="searchMap" :inline="true" :model="searchMap" class="serach_wrapper flex-space-between">
        <div class="search">
          <el-form-item prop="categoryName" size="small">
            <el-input v-model="searchMap.categoryName" placeholder="类型名称"></el-input>
          </el-form-item>
          <el-form-item prop="createBy" size="small">
            <el-input v-model="searchMap.createBy" placeholder="创建人"></el-input>
          </el-form-item>
          <el-form-item class="flex">
            <el-button @click="handleSearch()" class="btn_primary">查询</el-button>
            <el-button @click="handleReset()" class="btn_cancel">重置</el-button>
          </el-form-item>
        </div>
        <div class="edit">
          <el-form-item class="flex">
            <el-button @click="handleAdd" class="btn_primary" icon="el-icon-plus">
              新增
            </el-button>
          </el-form-item>
        </div>
      </el-form>

      <!-- 表格模块 -->
      <div class="table_container">
        <el-table :data="alarmTypeList" stripe v-loading="loading">
          <el-table-column prop="alarmEventTypeId" label="类型编号"></el-table-column>
          <el-table-column prop="categoryName" label="类型名称"></el-table-column>
          <el-table-column prop="createBy" label="创建人"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <!-- <el-table-column prop="delFlag" label="是否删除"></el-table-column> -->
          <el-table-column prop="eventAlarmDescribe" label="描述"></el-table-column>
          <el-table-column prop="eventId" label="事件ID" align="center"></el-table-column>
          <el-table-column prop="eventName" label="事件名称" align="center"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <div class="button-group">
                <span type="text" class="tag_primary" size="small" @click="handleEdit(scope.row)">编辑</span>
                <span type="text" class="tag_warning" size="small" @click="handleDelete(scope.row)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <Pagination v-if="total > 0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize" @change="getList"></Pagination>
      <!-- 弹框 -->
      <div class="dialog_content">
        <el-dialog class="m_dialog" :title="title" :visible.sync="dialogVisible" width="800" append-to-body :close-on-click-modal="false">
          <el-form ref="form" :model="formModel" label-width="120px" label-position="right" :rules="rules">
            <el-row>
              <!-- <el-col :span="24">
                <el-form-item label="类型名称" prop="alarmEventType" size="small">
                  <el-input class="width-100" v-model="formModel.alarmEventType" controls-position="right" placeholder="请输入类型名称" />
                </el-form-item>
              </el-col> -->
              <el-col :span="24">
                <el-form-item label="类型名称" prop="categoryName" size="small">
                  <el-input v-model="formModel.categoryName" placeholder="请输入类型名称" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
              </el-col>
              <el-col :span="24">
                <el-form-item label="事件ID" prop="eventId" size="small">
                  <el-input-number class="width-100" v-model="formModel.eventId" controls-position="right" :min="0" placeholder="请输入事件ID" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="事件名称" prop="eventName" size="small">
                  <el-input v-model="formModel.eventName" placeholder="请输入事件名称" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="报警内容描述" prop="eventAlarmDescribe" size="small">
                  <div @click="click">
                    <el-input v-model="formModel.eventAlarmDescribe" type="textarea" placeholder="请输入报警内容描述" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" prop="remark" size="small">
                  <el-input v-model="formModel.remark" placeholder="备注" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" class="btn_cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm" class="btn_primary">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>

  </div>
</template>

<script>
import { listAlarmEventType, getAlarmEventTypeListByid, addAlarmEventType, updateAlarmEventType, deleteAlarmEventType } from '@/api/alarm'
export default {
  name: 'alarmType',
  data () {
    return {
      // 弹框标题
      title: '弹框',
      //  弹框状态
      dialogVisible: false,
      // 加载状态
      loading: false,
      // 搜索条件
      searchMap: {
        pageNum:1,
        pageSize:10,
        //类型名称
        categoryName: undefined,
        // 创建人
        createBy: undefined,
      },
      // 表单数据
      formModel: {
        alarmEventTypeId: undefined,
        categoryName: "", // 类型名称
        eventAlarmDescribe: "", // 类型描述
        eventId: undefined, // 类型ID
        eventName: "", // 事件名称
        remark: "" // 描述 
      },
      alarmTypeList: [],
      // 总条数
      total: 0,
      rules: {
        categoryName: [
          { required: true, message: '请输入类型名称', trigger: 'blur' }
        ],
        eventId: [
          { required: true, message: '请输入事件ID', trigger: 'blur' }
        ],
        eventName: [
          { required: true, message: '请输入事件名称', trigger: 'blur' }
        ],
        eventAlarmDescribe: [
          { required: true, message: '请输入报警内容描述', trigger: 'blur' }
        ],
      }
    };
  },
  created () {
    this.getList()
  },
  computed: {
    pageTitle () {
      return '告警类型'
    }
  },
  watch: {},
  methods: {
    click () {
      console.log('click')
    },

    // 告警类型列表
    getList () {
      listAlarmEventType(this.searchMap).then(res => {
        if(res && 200 == res.code){
          this.alarmTypeList = res.rows
          this.total = res.total
        }
      })
    },
    fu () {
      console.log(13)
    },
    // 点击搜索
    handleSearch () {
      this.getList()
    },
    // 点击重置
    handleReset () {
      this.$refs['searchMap'].resetFields()
      this.handleSearch()
    },
    // 新增按钮
    handleAdd () {
      this.resetForm()
      this.dialogVisible = true
    },
    // 编辑按钮
    handleEdit (row) {
      this.resetForm()
      console.log(row)
      this.formModel = row
      // getAlarmEventTypeListByid(row.alarmEventTypeRuleId).then(res => {
      //   this.formModel = res.rows[0]
      // })
      this.dialogVisible = true
    },
    // 删除按钮
    handleDelete (row) {
      const alarmTypeId = [row.alarmEventTypeId]
      this.$confirm(`是否删除ID为 ${row.alarmEventTypeId} 的数据`, '删除', { type: 'error', configButtonText: "确定", cancelButtonText: "取消", }).then(() => {
        deleteAlarmEventType(alarmTypeId).then((res) => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    // 提交表单
    submitForm () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.formModel.alarmEventTypeId !== undefined) {
            updateAlarmEventType(this.formModel).then(res => {
              if (res && 200 === res.code) {
                this.$message.success('修改成功')
                this.dialogVisible = false
              }
            })
          } else {
            addAlarmEventType(this.formModel).then(res => {
              console.log(res)
              if (res && 200 === res.code) {
                this.$message.success('添加成功')
                this.dialogVisible = false
                this.getList()
              }
            })
          }
        }
      })
    },
    resetForm () {
      this.formModel = {
        alarmEventTypeId: undefined,
        categoryName: undefined, // 类型名称
        eventAlarmDescribe: undefined, // 类型描述
        eventId: undefined, // 类型ID
        eventName: undefined, // 事件名称
        remark: undefined // 描述 
      }
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    }
  },

  components: {},
}
</script>